<template>
	<!-- 潮人学院页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					潮人学院
				<navigator  class="loa_hui" hover-class="none" url="./addstudy">发表潮文</navigator>
			</view>
		</view>
		</view>
		
		<view class="banner">
		<view class="uni-padding-wrap">
		     <view class="page-section swiper">
		         <view class="page-section-spacing">
		             <swiper class="swiper" autoplay="true" :indicator-dots="false"  circular="true">
		                 <swiper-item>
									<navigator url=" " class="banner_a" hover-class="none">
		                    <image src="../../static/studybanner.png"></image>
								   </navigator>
		                 </swiper-item>
		                 <swiper-item>
									<navigator url="" class="banner_a" hover-class="none">
		                      <image src="../../static/studybanner.png"></image>
									 </navigator>
		                 </swiper-item>
		                 <swiper-item>
									<navigator url="" class="banner_a" hover-class="none">
		                    <image src="../../static/studybanner.png"></image>
								   </navigator>
		                 </swiper-item>
		             </swiper>
		         </view>
		     </view>
		 </view>
				</view>
		<view class="jns_ul">
			<navigator :url="'./studyxiang?key='+wenlei.tit" hover-class="none" class="jns_li" v-for="(wenlei,index) in wenlei">
				<image :src="wenlei.src" mode="widthFix" class="jns_img"></image>
				<view class="jns_li_text">{{wenlei.tit}}</view>
			</navigator>
		</view>
		<view class="kong"></view>
		<view class="lei_ul">
			<view :class="[lei_li_active === index ? 'lei_li_active lei_li' : 'lei_li']" v-for="(lei,index) in lei" :key="index" @tap="changelei(index)">
				{{lei}}
			</view>
		</view>
		
		<view class="wen_ul">
			<navigator class="wen_li" hover-class="none" :url="wen.url+'?key='+wen.title" v-for="(wen,index) in wen">
				<view class="wen_li_left">
					<view class="wen_li_left_tit">
						<text class="hsn">{{wen.smtit}}</text>
						<view class="name">
							{{wen.title}}
						</view>
					</view>
					<view class="wen_li_left_text">
						{{wen.text}}
					</view>
					<view class="wen_li_left_bt">
						<image src="../../static/eye.png" class="eye_img" mode="widthFix"></image>
						{{wen.eyenum}}
					</view>
				</view>
				<image mode="widthFix" :src="wen.src" class="wen_li_right"></image>
			</navigator>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				lei_li_active:0,  //默认全部分类
				lei:['新手入门','中班进阶','精英集合'],
				wenlei:[
					{
						tit:'潮人指南',
						src:'../../static/study1.png'
					},
					{
						tit:'干货技巧',
						src:'../../static/study2.png'
					},
					{
						tit:'邀约课程',
						src:'../../static/study3.png'
					},
					{
						tit:'潮人故事',
						src:'../../static/study4.png'
					},
				],
				wen:[
					{
					smtit:'精选',
					title:'最实用的引流技巧',
					text:'新人必看，邀请好友基础解读',
					eyenum:219,
					src:'../../static/smstudy.png',
					url:'./studyfu'
					},
					{
					smtit:'精选',
					title:'最实用的引流技巧',
					text:'新人必看，邀请好友基础解读',
					eyenum:219,
					src:'../../static/smstudy.png',
					url:'./studyfu'
					},
					{
					smtit:'精选',
					title:'最实用的引流技巧',
					text:'新人必看，邀请好友基础解读',
					eyenum:219,
					src:'../../static/smstudy.png',
					url:'./studyfu'
					}
				]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			changelei (index){  //切换分类,更新shop的值，值为空则无订单，
				this.lei_li_active=index;
			},
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.switchTab({
				    url: '../commission/commission'
				});
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #fff;
	}
	.lei_ul{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content:center;
		align-items: center;
		background-color: #fff;
	}
	/* #ifdef H5 */
	.lei_ul{
		top:90rpx;
	}
	/* #endif */
	.lei_li{
		width:50%;
		padding:20rpx 0;
		color:#7d7e80;
		text-align: center;
		font-size: 30rpx;
	}
	.lei_li_active{
		color: #ff80c0;
		border-bottom:4rpx solid #ff80c0;
	}
	.loa_hui{
			font-size: 28rpx;
		    padding: 12rpx 20rpx;
		    font-weight: 200;
		    color: #fff;
		    background: #ff80c0;
		    border-radius: 10rpx;
			top:20%;
	}
	.banner uni-swiper{
		    height: 250rpx;
			width:93%;
			margin:20rpx auto;
			border-radius: 20rpx;
	}
	.banner_a{
		width: 100%;
		height: 100%;
	}
	.banner uni-image{
		    width: 100%;
		    height: 100%;
			border-radius: 20rpx;
	}
	.banner uni-swiper .uni-swiper-dots-horizontal{
		    left: 8%;
			bottom: 10rpx;
	}
	 .uni-swiper-dots-horizontal{
		width:25rpx!important;
		height:25rpx!important;
	}
	.jns_ul{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20rpx;
	}
	.jns_li{
		flex:1;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.jns_img{
		width:90rpx;
	}
	.jns_li_text{
		width:100%;
		text-align: center;
		color: #9e9a9b;
		margin-top:10rpx;
	}
	.kong{
		width:100%;
		height:15rpx;
		background-color: rgb(249,249,252);
	}
	.wen_li{
		width:93%;
		margin:0 auto;
		padding:30rpx 0;
		border-bottom:2rpx solid #ededed;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wen_li_left{
		width:70%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.wen_li_right{
		width:30%;
		border-radius: 10rpx;
		height:150rpx;
	}
	.wen_li_left_tit{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.hsn{
			width:50rpx;
		    font-size: 20rpx;
		    color: #fff;
		    background: -webkit-linear-gradient(top,rgb(236, 207, 180),rgb(228, 102, 107));
		    padding: 3rpx 10rpx;
		    border-radius: 10rpx;
		    margin: 0 15rpx auto 0;
		    font-weight: 200;
			white-space: nowrap;
	}
	.name{
		width:90%;
		overflow: hidden;
		color:#000;
		font-weight: 500;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size:33rpx;
	}
	.wen_li_left_text{
		    color: #adadad;
		    font-weight: 400;
		    font-size: 26rpx;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    width: 100%;
			margin:10rpx 0;
	}
	.wen_li_left_bt{
		display: flex;
		align-items: center;
	    color: #adadad;
	}
	.eye_img{
		width:35rpx;
		margin-right:15rpx;
	}
</style>
